@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --accent: 201 90% 27%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --info: 204 94% 94%;
    --info-foreground: 199 89% 48%;

    --success: 149 80% 90%;
    --success-foreground: 160 84% 39%;

    --warning: 48 96% 89%;
    --warning-foreground: 25 95% 53%;

    --error: 0 93% 94%;
    --error-foreground: 0 84% 60%;

    --ring: 240 5.9% 10%;

    --radius: 0.5rem;
  }

  [data-kb-theme="dark"] {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 201 90% 27%;
    --accent-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --info: 204 94% 94%;
    --info-foreground: 199 89% 48%;

    --success: 149 80% 90%;
    --success-foreground: 160 84% 39%;

    --warning: 48 96% 89%;
    --warning-foreground: 25 95% 53%;

    --error: 0 93% 94%;
    --error-foreground: 0 84% 60%;

    --ring: 240 4.9% 83.9%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  @media (max-width: 640px) {
    .container {
      @apply px-4;
    }
  }
}

@layer components {
  @keyframes bkg {
    0% {
      background-position: 0% -5%;
    }
    50% {
      background-position: 10% -15%;
    }
    100% {
      background-position: 0% 5%;
    }
  }

  @keyframes earthquake {
    0% {
      transform: translate(.5px, .5px) rotate(0deg);
    }
    10% {
      transform: translate(-.5px, -1px) rotate(-.5deg);
    }
    20% {
      transform: translate(-1.5px, 0px) rotate(.5deg);
    }
    30% {
      transform: translate(1.5px, 1px) rotate(0deg);
    }
    40% {
      transform: translate(.5px, -.5px) rotate(.5deg);
    }
    50% {
      transform: translate(-.5px, 1px) rotate(-.5deg);
    }
    60% {
      transform: translate(-1.5px, .5px) rotate(0deg);
    }
    70% {
      transform: translate(1.5px, .5px) rotate(-.5deg);
    }
    80% {
      transform: translate(-.5px, -.5px) rotate(.5deg);
    }
    90% {
      transform: translate(.5px, 1px) rotate(0deg);
    }
    100% {
      transform: translate(.5px, -1px) rotate(-.5deg);
    }
  }

  .shake-it {
    animation: earthquake 0.5s infinite;
  }

  .shiny-text {
    position: relative;
    overflow: hidden;
  }

  .shiny-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.1) 100%
    );
    transform: skewX(-20deg);
    animation: shine 2s;
  }

  @keyframes shine {
    0% {
      left: -150%;
    }
    50% {
      left: 100%;
    }
    100% {
      left: 150%;
    }
  }

  .sonar {
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0)
    );
    animation: sonarEffect 4s infinite cubic-bezier(.36,.85,.57,.88);
  }

  @keyframes sonarEffect {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    45% {
      opacity: .5;
    }
    70% {
      transform: scale(6);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}
